<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PageSpeed Filters</title>
    <link rel="stylesheet" href="doc.css">
  </head>
  <body>
<!--#include virtual="_header.html" -->


  <div id=content>
<h1>PageSpeed Filters</h1>

<p>
PageSpeed improves web page latency by changing the resources on that
web page to implement web performance
<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rules_intro">best practices</a>.  Each sort
of change that PageSpeed makes is embodied in a <em>filter</em>.  The filters
are run in a pre-defined order, but can be enabled and disabled in the server
<a href="configuration">configuration file</a>.
</p>
<p>
Some filters simply alter HTML content, such as removing excess
whitespace, attributes, or attribute values that will be ignored.
</p>
<p>
Other filters change references to CSS, JavaScript, or images to point
to more optimized versions, because they:
</p>
<ul>
  <li>are smaller,</li>
  <li>combine multiple files into one, and</li>
  <li>extend the cache lifetime</li>
</ul>

<h2>Categories of filters</h2>
<p>
Filters are of many categories that fit under performance best practices.
The current set of filters fits in these categories as follows:
</p>
<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/caching">
  <h3>Optimize Caching</h3>
</a>
<ul>
  <li><a href="filter-canonicalize-js">Canonicalize JavaScript Libraries</a>
  <li><a href="filter-cache-extend">Extend Cache</a></li>
  <li><a href="filter-cache-extend-pdfs">Extend Cache PDFs</a></li>
  <li><a href="filter-local-storage-cache">Local Storage Cache</a></li>
  <li><a href="filter-css-outline">Outline CSS</a></li>
  <li><a href="filter-js-outline">Outline JavaScript</a></li>
</ul>

<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rtt">
  <h3>Minimize Round Trip Times</h3>
</a>
<ul>
  <li><a href="filter-css-combine">Combine CSS</a></li>
  <li><a href="filter-flatten-css-imports">Flatten CSS @imports</a></li>
  <li><a href="filter-css-inline">Inline CSS</a></li>
  <li><a href="filter-css-inline-google-fonts">Inline Google Fonts API CSS</a></li>
  <li><a href="filter-js-combine">Combine JavaScript</a></li>
  <li><a href="filter-js-inline">Inline JavaScript</a></li>
  <li><a href="filter-css-above-scripts">Move CSS Above Scripts</a></li>
  <li><a href="domains#shard">Configuration file directive to
      shard domains</a></li>
  <li><a href="filter-image-sprite">Sprite Images</a></li>
  <li><a href="filter-insert-dns-prefetch">Pre-Resolve DNS</a></li>
</ul>

<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/request">
  <h3>Minimize Request Overhead</h3>
</a>
<ul>
  <li><a href="filter-domain-rewrite">Rewrite Domains</a></li>
  <li><a href="domains#mapping_rewrite">Configuration
      file directive to map domains</a></li>
</ul>

<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/payload">
  <h3>Minimize Payload Size</h3>
</a>
<ul>
  <li><a href="filter-whitespace-collapse">Collapse Whitespace</a></li>
  <li><a href="filter-head-combine">Combine Heads</a></li>
  <li><a href="filter-attribute-elide">Elide Attributes</a></li>
  <li><a href="filter-js-minify">Minify JavaScript</a></li>
  <li><a href="filter-image-optimize">Optimize Images</a></li>
  <li><a href="filter-prioritize-critical-css">Prioritize Critical CSS</a></li>
  <li><a href="filter-dedup-inlined-images">Deduplicate Inlined Images</a></li>
  <li><a href="filter-comment-remove">Remove Comments</a></li>
  <li><a href="filter-quote-remove">Remove Quotes</a></li>
  <li><a href="filter-css-rewrite">Rewrite CSS</a></li>
  <li><a href="filter-rewrite-style-attributes"
      >Rewrite Style Attributes</a></li>
  <li><a href="filter-trim-urls">Trim URLs</a></li>
</ul>

<a target="_blank" href="https://developers.google.com/speed/docs/best-practices/rendering">
  <h3>Optimize Browser Rendering</h3></a>
<ul>
  <li><a href="filter-convert-meta-tags">Convert Meta Tags</a></li>
  <li><a href="filter-js-defer">Defer Javascript</a></li>
  <li><a href="filter-hint-preload-subresources"
      >Hint Resource Preloading</a></li>
  <li><a href="filter-inline-preview-images">Inline Preview Images</a></li>
  <li><a href="filter-lazyload-images">Lazily Load Images</a></li>
  <li><a href="filter-image-responsive">Make Images Responsive</a></li>
  <li><a href="filter-css-to-head">Move CSS to Head</a></li>
  <li><a href="filter-image-optimize">Optimize Images</a></li>
  <li><a href="reference-image-optimize#progressive"
      >Convert JPEG to Progressive</a></li>
  <li><a href="filter-rewrite-style-attributes"
      >Rewrite Style Attributes</a></li>
</ul>

<h3>Other</h3>
<ul>
  <li><a href="filter-head-add">Add Head</a></li>
  <li><a href="filter-instrumentation-add">Add Instrumentation</a></li>
  <li><a href="filter-source-maps-include"
      >Include JavaScript Source Maps</a></li>
  <li><a href="filter-css-inline-import">Inline @import to Link</a></li>
  <li><a href="filter-insert-ga">Insert Google Analytics Snippet</a></li>
  <li><a href="filter-make-show-ads-async"
      >Make Google AdSense Async</a></li>
  <li><a href="filter-make-google-analytics-async"
      >Make Google Analytics Async</a></li>
  <li><a href="filter-pedantic">Pedantic</a></li>
  <li><a href="module-run-experiment">Run Experiment</a></li>
</ul>

<p>
In some cases, a filter such as 'Optimize Images' helps both minimize request overhead and optimize browser rendering.
</p>

  </div>
  <!--#include virtual="_footer.html" -->
  </body>
</html>
